<template>
  <div class="mask" v-show="show">
    <div class="modal">
      <div class="content">
        <div class="close" @click="close"></div>
        <template v-if="modalType === 'a'">
          <div class="title"></div>
          <p style="padding-top: 20px;">實際投票時間約為 63 分鐘（預計為 60 分鐘），用戶需要等待大約 63/60=105% 的時間才能提取資產。
            因此，質押後至少需要等待14天才能解質押，解質押後至少需要等待1天才能提現。</p>
          <div class="footer">
            <button class="confirm" @click="close">
              <img class="icon-img" src="../assets/confirm-icon.png" alt="">
              <span>知道了</span>
            </button>
          </div>
        </template>
        <template v-if="modalType === 'b'">
          <div class="title">賬 號</div>
          <div class="address">您的地址</div>
          <div class="address-box" style="width: 100%;">
            <p style="font-size: 8px" id="address">{{ address }}</p>
            <button class="copy" data-clipboard-text="666"  id="copy"></button>
          </div>
          <div class="footer">
            <button class="confirm" @click="close">
              <img class="icon-img" src="../assets/confirm-icon.png" alt="">
              <span>斷開錢包</span>
            </button>
          </div>
        </template>

        <template v-if="modalType === 'c'">
          <img class="c-img" src="../assets/net.png" alt="">
        </template>
      </div>

    </div>
  </div>
</template>

<script>
import Clipboard from "clipboard";
import { mapGetters } from "vuex";

export default {
  name: "TipModal",
  props: {
    modalType: {
      type: String,
      default: 'a'
    }
  },
  computed: {
    ...mapGetters([
      'address',
    ])
  },
  data() {
    return {
      show: false
    }
  },
  methods: {
    open() {
      console.log(this.modalType)
      this.show = true;
    },
    close() {
      this.show = false;
    },
    copy(){
      const clip = new Clipboard('.copy')
      clip.on('success', e => {
        this.copySuccess = true;
      })
      clip.on('fail', e => {
        console.log('浏览器不支持')
        clip.destroy();
      })
    }
  }
}
</script>

<style scoped lang="less">
.mask {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  width: 400px;
  //height: 300px;
  border-radius: 6px;
  opacity: 1;

  /* 白色 */
  background: #FFFFFF;
}

.content {
  padding: 21px 0px 50px;
  text-align: left;
  position: relative;
}

.close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 11px;
  right: 11px;
  background: url('@/assets/close.png') no-repeat center;
  background-size: cover;
  cursor: pointer;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 25px;
}

.confirm {
  opacity: 1;
  font-size: 14px;
  font-weight: bold;
  background: #FFA000;
  line-height: 36px;
  color: #1E1E1E;
  text-align: center;
  padding: 5px 20px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

  span {
    line-height: 20px;
  }
}

.icon-img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 28px;
  text-align: center;
}

.address {
  font-size: 18px;
  font-weight: bold;
  color: #1E1E1E;
  margin-top: 35px;
}

.address-box {
  width: 330px;
  height: 60px;
  border-radius: 4px;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* 浅灰 */
  background: #F2F2F2;
  padding: 20px 0px;
  box-sizing: border-box;
  border: 1px solid #E1BEE7;
  margin-top: 15px;

  p {
    text-align: center;
  }
}

.copy {
  width: 20px;
  height: 20px;
  background: url("@/assets/copy-icon.png") no-repeat center;
  background-size: cover;
  margin-right: 10px;
}

.c-img {
  width: 368px;
  height: 347px;
}
</style>